<template>
  <view class="classic">
    <view class="top">
      <u-periodical :periodical="classics.index" />
      <u-like :like="classics.like_status" :count="classics.fav_nums" @tap="onLike" />
    </view>
    <u-movie v-if="classics.type === 100" :img="classics.image" :content="classics.content" />
    <u-music v-else-if="classics.type === 200" :img="classics.image" :content="classics.content" />
    <u-sentence v-else :img="classics.image" :content="classics.content" />
    <u-navi @prev="onPrev" @next="onNext" class="navi" :title="classics.title" :first="first" :latest="latest" />
  </view>
</template>

<script>
import ULike from '../../components/Like/Like.vue';
import UMovie from '../../components/Movie/Movie.vue';
import UPeriodical from '../../components/Periodical/Periodical.vue';
import UNavi from '../../components/Navi/Navi.vue';
import UMusic from '../../components/Music/Music.vue';
import USentence from '../../components/Sentence/Sentence.vue';
import ClassicModel from '../../models/ClassicModel.js';
import LikeModel from '../../models/like.js';
const classic = new ClassicModel();
const like = new LikeModel();
export default {
  components: {
    ULike,
    UMovie,
    UPeriodical,
    UNavi,
    UMusic,
    USentence
  },
  data() {
    return {
      classics: {},
      first: false,
      latest: true
    };
  },
  onLoad() {
    classic.getLatest(res => {
      this.classics = res;
      // classic._setLatest(res.index);
    });
  },
  methods: {
    // onLike(like,count){
    //   this.classics.like_status = !like;
    //   this.classics.fav_nums = this.classics.like_status?(this.classics.fav_nums+1):(this.classics.fav_nums-1);
    //   let behavior = this.classics.like_status?'like':'dislike';
    //   console.log(behavior)
    // }
    onLike() {
      this.classics.like_status = !this.classics.like_status;
      this.classics.fav_nums = this.classics.like_status ? this.classics.fav_nums + 1 : this.classics.fav_nums - 1;
      let behavior = this.classics.like_status ? 'like' : 'dislike';
      like.like(behavior, this.classics.id, this.classics.type);
    },
    _getClassics(nextOrPrev){
      let index = this.classics.index;
      classic.getClassic(index, nextOrPrev, res => {
        this.classics = res;
        this.first = classic.isFirst(res.index)
        this.latest = classic.isLatest(res.index);
      });
    },
    onPrev() {
      this._getClassics('previous');
    },
    onNext() {
      this._getClassics('next');
    }
  }
};
</script>

<style lang="scss">
.classic {
  width: 100%;
  align-items: center;
  flex-direction: column;
  display: flex;
  .top {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: 100rpx;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
  }
  .navi {
    position: absolute;
    bottom: 100rpx;
  }
}
</style>
